<template>
  <div>
    <Card>
      <Alert>An info prompt</Alert>
      <div class="buttons">
        <Input v-model="value" placeholder="Enter something..." style="width: 200px" />
        <Button type="primary" @click="editModal('', 'post', '添加主机')" class="search-btn">添加主机</Button>
        <Button type="primary" class='button'>添加主机</Button>
        <Button type="primary" class='button'>Primary</Button>
        <Button type="primary" class='button'>Primary</Button>
        <Button type="primary" class='button'>Primary</Button>
      </div>

      <Table width='1100' border :columns="columns" :data="tableData"></Table>

      <!-- 事先定义出一个Modal -->
      <Modal
          v-model="modalflag"
          title="Common Modal dialog box title"
          @on-ok="ok"
          @on-cancel="cancel">
          <Input>xxx</Input>
          <Button>xxx</Button>
          <p>Content of dialog</p>
      </Modal>
     
   <!--  <Modal
       v-model="modalMap.modalVisible"
       :title="modalMap.modalTitle"
     >
       <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="85">
         <Alert closable>管理用户：用来登陆你的主机获取资产信息，请务必配置！</Alert>
         <div v-if="editModalData && editModalData == 'put'">
           <FormItem label="主机名称" prop="hostname">
             <Input v-model="formValidate.hostname" :maxlength="45" placeholder="请输入主机名"></Input>
           </FormItem>
         </div>
         <div v-else>
           <FormItem label="主机名" prop="hostname">
             <Input v-model="formValidate.hostname" :maxlength="45" placeholder="请输入主机名"></Input>
           </FormItem>
         </div>
         <FormItem label="IP" prop="ip">
           <Input v-model="formValidate.ip" :maxlength="45" placeholder="请输入IP地址"></Input>
         </FormItem>
         <FormItem label="公网IP" prop="public_ip">
           <Input v-model="formValidate.public_ip" :maxlength="45" placeholder="公网IP"></Input>
         </FormItem>
         <FormItem label="端口">
           <Input v-model="formValidate.port" :maxlength="5" placeholder="端口"></Input>
         </FormItem>
         <FormItem label="IDC" prop="idc">
           <Select
             class="search-input-long"
             v-model="formValidate.idc"
             filterable
             multiple
             placeholder="选择IDC机房"
           >
             <Option
               v-for="item in allIDCList"
               :value="item.name"
               :key="item.id"
             >{{ item.name }}</Option>
           </Select>
         </FormItem>
         <FormItem label="备注" prop="detail">
           <Input
             v-model="formValidate.detail"
             type="textarea"
             :autosize="{minRows: 2,maxRows: 10}"
             :maxlength="50"
             placeholder="简单描述下吧"
           ></Input>
         </FormItem>

         <FormItem>
           <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
           <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
         </FormItem>
       </Form>
     </Modal> -->
    </Card>
  </div>
</template>

<script>
  import {getServerList, delServer} from "@/api/cmdb/servers.js"
  export default {
    data() {
      return {
        value: '',
        // modalflag绑定Modal => false: 隐藏Modal, true: 显示Modal
        modalflag: false,
        columns: [
          {
            title: '主机名',
            // key: 'hostname', // 直接展示数据
            width: 150,
            sortable: true,
            // render: 当需要对数据进行定制的时候
            render: (h, params) => {
              return h('a', params.row.hostname)
            }
          },
          {
            title: '内网IP',
            key: 'private_ip',
            width: 150,
            sortable: true
          },
          {
            title: '公网IP',
            key: 'ip',
            width: 150,
            sortable: true
          },
          {
            title: 'IDC',
            key: 'idc',
            width: 150,
            sortable: true
          },
          {
            title: '区域',
            key: 'region',
            width: 150,
            sortable: true
          },
          {
            title: '状态',
            key: 'status',
            width: 150,
            render: (h, params) => {
              
              return h('Tag', {
                props: {
                  color : 'error'
                }
              }, params.row.status)
            }
          },
          {
            title: '操作',
            key: 'action',
            width: 200,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, 'SSH'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.delServer(params.index)
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],
        //  tableData的数据 => 要去外部的api获取 => easy_mock
        tableData: []
      }
    },
    methods: {
      show(index) {
        this.modalflag = true
        // this.$Modal.info({
        //   title: 'User Info',
        //   content: `Name：${this.tableData[index].name}<br>Age：${this.tableData[index].age}<br>Address：${this.tableData[index].address}`
        // })
      },
      remove(index) {
        this.tableData.splice(index, 1);
      },
      ok(){
        console.log("确定-> 添加一些自己的代码，保存一些数据！！")
      },
      cancel(){
        console.log("取消")
      },
      getServerList(){
        // http://47.x.x.x./api/cmdb/servers
        getServerList()
        .then( 
        // 请求成功的处理方式
        res => {
            
            console.log(res.data)
            if(res.data.status_code=10000){
              this.tableData = res.data.data
            }else{
              console.log(res.data.message)
            }
            this.$Message.error("出错了");
        },
        // 请求失败时的处理方式 => 可省
        res => {
          console.log('error', res);
          
        }).catch(
          err => {
          console.log("出错了")
          console.log(err)
        })
        // catch 捕获同步异常(与tyr...except功能差不多) => 可省
      },
      // 删除指定主机
      delServer(index){
        // 找到当前要删除的数据
        var current_server = this.tableData[index]
        // 在后端删除
        console.log(current_server)
        delServer(current_server.id)
        .then( 
        // 请求成功的处理方式
        res => {
            console.log(res.data)
            if(res.data.status_code=10000){
              // 删除tableData数据
               this.tableData.splice(index, 1)
               this.$Message.info(res.data.message);
            }else{
             console.log(res.data.message)
            }
        },
        // 请求失败时的处理方式 => 可省
        res => {
          this.$Message.error("出错了");
        }).catch(
          err => {
          console.log("出错了")
          console.log(err)
          this.$Message.error("出错了");
        })
        // catch 捕获同步异常(与tyr...except功能差不多) => 可省
      },
    },
    mounted(){
      this.getServerList();
    }
  }
</script>

<style>
  .button {
    margin-left: 5px;
  }

  .buttons {
    margin-bottom: 5px;
  }
</style>
